/**
* Description: 文字toolTip
*
* Created by hrx on 2023/9/18
*/
<template>
  <div>
    <el-tooltip v-if="text && text.length > maxLength" class="item" effect="dark" :content="text" placement="top">
      <span class="text" :style="{'-webkit-line-clamp': showLineNum}">{{ text }}</span>
    </el-tooltip>
    <span v-else>{{ text }}</span>
  </div>
</template>

<script setup lang="ts">
export interface Props{
  text: string | null,
  maxLength: number | string,
  showLineNum: number | string
}
const props = withDefaults(defineProps<Props>(), {
  text: '',
  maxLength: 46,
  showLineNum: 2
})

</script>

<style scoped>
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
</style>